<template>
<div>
  <!-- 顶部的面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
    <el-breadcrumb-item>厨师管理</el-breadcrumb-item>
    <el-breadcrumb-item>新增厨师</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

  <!-- 表单 -->
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>

    <el-form-item label="手机号" prop="phoneNumber">
      <el-input v-model="ruleForm.phoneNumber"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password"></el-input>
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <el-input v-model="ruleForm.age"></el-input>
    </el-form-item>

    <!--上传图像    -->
    <el-form-item label="封面图" prop="imgUrl">

      <el-upload
          class="picture-uploader"
          action="http://localhost:9523/resources/upload/image/chef/"
          :show-file-list="false"
          :on-success="handleUploadSuccess">
        <i class="el-icon-upload picture-uploader-icon"></i>
        <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
        <div class="picture-uploader-text">仅允许上传不超过 <i>5MB</i> 的图片</div>
      </el-upload>
      <div class="picture-preview" v-if="ruleForm.imgUrl">
        <el-image class="image"
                  :src="ruleForm.imgUrl"
                  fit="cover"></el-image>
      </div>
    </el-form-item>

<!--    <el-form-item label="图像" prop="imgUrl">-->
<!--      <el-input v-model="ruleForm.imgUrl"></el-input>-->
<!--    </el-form-item>-->

    <el-form-item label="性别" prop="gender">
      <el-input v-model="ruleForm.gender"></el-input>
    </el-form-item>

    <el-form-item label="厨艺介绍" prop="description">
      <el-input v-model="ruleForm.description"></el-input>
    </el-form-item>


    <el-form-item label="是否可预约">
      <el-switch
          v-model="ruleForm.displayState"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ccc">
      </el-switch>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button type="warning" @click="gotoList">返回列表</el-button>
    </el-form-item>
  </el-form>
</div>
</template>


<script>
export default {
  data(){
    return{
      //上传图片的参数
ruleForm: {
  name: '',
  phoneNumber: '',
  password: '',
  age:'',
  imgUrl: '',
  gender:'',
  description: '',
  displayState: 1

},
// 表单规则
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,10}$/, message: '姓名必须是2~10长度的字符组成，且不允许使用标点符号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输密码', trigger: 'blur'},
          {pattern: /.{6,16}/, message: '密码必须是6~16位长度,允许使用数字,子母,标点符号', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {pattern: /^(1[89]|[2-5][0-9]|6[0-5])$/, message: '年龄必须是18~65岁之间', trigger: 'blur'}
        ],
        gender: [
        {required: true, message: '请输入性别', trigger: 'blur'},
        {pattern: /^(男|女){1}$/, message: '性别必须是男或者女', trigger: 'blur'}
        ],

      },


    }
  },
  methods:{
    // 返回列表
    gotoList() {
      this.$router.push('/temp/chef/list');
    },

    // 上传成功后的回调
    handleUploadSuccess(response) {
      console.log("------------------------------------------------"+response);
      this.ruleForm.imgUrl = response.data.url;
    },

    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9523/chef/add-new';
          console.log('url = ' + url);
          let formData = this.qs.stringify(this.ruleForm);
          console.log('formData = ' + formData);

          this.axios.post(url, formData).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.$message({
                message: '新增厨师成功！',
                type: 'success'
              });
              this.resetForm(formName);
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
.picture-uploader {
  float: left;
  width: 240px;
  height: 135px;
  margin-right: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.picture-uploader .picture-uploader-icon {
  width: 240px;
  height: 80px;
  font-size: 58px;
  color: #8c939d;
  line-height: 80px;
  text-align: center;
}

.picture-uploader .picture-uploader-text {
  width: 240px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
  color: #8c939d;
}

.picture-uploader .picture-uploader-text i {
  font-size: 10px;
  font-weight: bold;
  font-style: normal;
  color: #F56C6C;
}

.picture-preview {
  width: 240px;
  height: 135px;
  margin-right: 20px;
  border: 1px solid #e8e6e6;
  border-radius: 6px;
  float: left;
  display: inline;
  position: relative;
}

.picture-preview .image {
  width: 240px;
  height: 135px;
  border-radius: 6px;
}
</style>
